<template>
  <div>
    <div>
      <div @click="openPicker($event)">
        <div class="select-box">
          <div class="left" v-if="value1.length > 0">
            <span>{{showTitle(valueDispose(value1))}}</span>
          </div>
          <div class="left" v-else>
            <span style="color: #C9CDD4;">{{placeholder ? placeholder : '请选择'}}</span>
          </div>
          <x-icon type="ios-arrow-down" size="18" class="right-icon"></x-icon>
        </div>
        <slot :value="valueDispose(value1)"></slot>
      </div>
      <group>
        <popup-picker ref="picker" :show.sync="showPopupPicker" :show-cell="false" confirm-text="确定" :data="datalist"
          v-model="value1" @on-show="onShow" @on-hide="onHide" :show-name="true" :disabled="disabled"
        @on-change="onChange"></popup-picker>
      </group>
    </div>
   <!--  <div v-if="type == 'datetime'">
      <datetime title="datetime" v-model="date"></datetime>
    </div> -->

  </div>
</template>

<script>
  import {
    PopupPicker,
    Datetime,
    Group
  } from 'vux'

  export default {
    components: {
      PopupPicker,
      Datetime,
      Group
    },
    props: {
      type: {
        type: String,
        default: ''
      },
      // 如为多列选择器则放多个数组
      datalist: {
        type: Array,
        default: () => [[]]
      },
      pickerData: {
        type: Array,
        default: () => []
      },
      placeholder: {
        type: String,
        default: ''
      },
      disabled: {
        type: Boolean,
        default: false
      }
    },
    model: {
      prop: 'pickerData',
      event: 'handleChange'
    },
    watch: {
      pickerData(val) {
        this.value1 = typeof val == 'string' ? val ? [val] : [] : val
      }
    },
    data() {
      return {
        value1: this.pickerData,
        date: '',
        showPopupPicker: false
      }
    },
    mounted() {
      console.log(this.datalist)
    },
    methods: {
      openPicker(vnode) {
        if(this.disabled || vnode.target.disabled) return
        this.showPopupPicker = true
      },
      onChange(val) {
        let value = val
        this.$emit('handleChange', value)
      },
      onShow() {
        this.$emit('handleShow')
      },
      onHide(type) {
        this.$emit('handleHide', type)
      },
      valueDispose(arr) {
        return arr.join(' ')
      },
      showTitle(key) {
        return this.$refs.picker.getNameValues(key)
      }
    }
  }
</script>

<style lang="less" scoped>
  /deep/ .vux-no-group-title {
    margin: 0;
  }
</style>
